<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #out {
            width: 500px;
            margin: 50px auto;
            background-color: greenyellow;
            padding: 10px;
            background-size: contain;
        }
    </style>    
    <script type="text/javascript">
        /*
         DOM 文档对象模型(Document Object Model)
         1、DOM 是一个文档对象模型，它把文档中的所有内容都看作对象，并把文档对象模型封装在浏览器中。
         DOM 文档的加载顺序：
         1、自相而下加载执行

        */
        /*
        节点类型
        1、元素节点：标签
        2、属性节点：标签的属性
        3、文本节点：标签中的文本
        4、注释节点：注释
        5、文档节点：整个文档
        节点属性及类型矩阵：
        1、元素节点	nodeType=1	nodeName=标签名	   nodeValue=null
        2、属性节点	nodeType=2	nodeName=属性名	nodeValue=属性值
        3、文本节点	nodeType=3	nodeName=#text	nodeValue=文本内容
        4、注释节点	nodeType=8	nodeName=#comment	nodeValue=注释内容
        5、文档节点	nodeType=9	nodeName=#document	nodeValue=null
        */



        window.onload = () => { // 页面加载完成时执行

            var button = document.getElementById("btn");
            console.log("----------button----------");
            console.log(button.nodeType);
            console.log(button)
            console.log(button.nodeName);
            console.log(button.innerHTML);
            button.innerHTML = "BUTTON"; // 修改按钮内容

            /*
            事件
            1、事件：用户与页面进行交互时，会触发一些事件，比如点击、双击、鼠标移动、键盘按下等。
            2、事件处理：通过事件处理程序来响应事件，事件处理程序就是用来响应事件的函数。
            3、事件处理程序：
                - 绑定事件：通过事件处理程序来响应事件
                - 触发事件：通过事件处理程序来响应事件
            */
            console.log("----------事件----------");
            button.onclick = () => {
                alert("button");
            }
            
            // DOM 查询
            // getElementById()
            document.getElementById("btn2").onclick = () => {
                var bj = document.getElementById("bj");
                bj.style.backgroundColor = "red";
                alert(bj.innerHTML);
            }

            // getElementsByTagName()
            document.getElementById("btn3").onclick = () => {
                var lis = document.getElementsByTagName("li");
                alert(lis);
                for(var i = 0; i < lis.length; i++){
                    lis[i].style.backgroundColor = "yellow";
                }
            }

            // getElementsByName()
            //class 属性为保留字，若使用通过.className 获取不到元素，需要使用getElementsByClassName()
            document.getElementById("btn4").onclick = () => {
                var inputs = document.getElementsByName("sex");
                console.log(inputs);
                for(var i = 0; i < inputs.length; i++){
                    if(inputs[i].checked){
                        alert(inputs[i].title);
                    }
                } 
            }

            //给予一些线上图片url放在一个数组中，然后通过按钮点击事件，将图片显示在页面上
            var imgs = ["http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960", 
                        "http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280", 
                        "https://img0.baidu.com/it/u=1549693226,866024670&fm=253&fmt=auto&app=120&f=JPEG?w=949&h=633", 
                        "https://inews.gtimg.com/news_bt/OpoRQHD7BhsAvwcusQqx1FUEB9BDZhXA3mYMevgMLTsbIAA/1000"];

            var index = 0;
            var img = document.getElementById("img");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            //img.src = imgs[index];
            prev.onclick = () => {
                index--;
                if(index < 0){
                    index = imgs.length - 1;
                }
                img.src = imgs[index];
            }
            next.onclick = () => {
                index++;
                if(index >= imgs.length){
                    index = 0;
                }
                img.src = imgs[index];
            }

       
            var list1 = document.getElementById("list");
            console.log(list1);
            var lis = list1.getElementsByTagName("li");
            console.log(lis);
            console.log("----------childNodes----------");
            var cNs = list1.childNodes;
            console.log(cNs);
            console.log("----------children----------");
            var cNs2 = list1.children
            console.log(cNs2);

            console.log("----------firstChild----------");
            var list2 = document.getElementById("list2");

            console.log(list2.firstChild);
            console.log(list2.firstChild.innerHTML);
            console.log(list2.length);
            console.log("----------firstElementChild----------")
            console.log(list2.firstElementChild);
            console.log("----------listChild----------");
            console.log(list2.listChild);
            console.log("----------lastElementChild----------")
            console.log(list2.lastElementChild);

            console.log("----------parentNode----------");

            var parent = document.getElementById("bj").parentNode;
            console.log(parent);
            console.log("----------parentElement----------");
            console.log(document.getElementById("bj").parentElement);
            console.log("----------nextSibling----------");
            console.log(document.getElementById("bj").nextSibling);

            console.log("----------nextElementSibling----------");
            console.log(document.getElementById("bj").nextElementSibling);

            console.log("----------previousSibling----------");
            console.log(document.getElementById("bj").previousSibling);

            console.log("----------previousElementSibling----------");
            console.log(document.getElementById("bj").previousElementSibling);

            //获取body标签 
            console.log("----------body----------");
            var body = document.getElementsByTagName("body"); 
            console.log(body);

            console.log("----------document.body----------");
            console.log(document.body);
            console.log("----------document.documentElement----------");
            console.log(document.documentElement);

            console.log("----------document.all----------");
            console.log(document.all);
            console.log("----------document.getElementByTagName(\"*\")----------");
            console.log(document.getElementsByTagName("*"));
            console.log("----------document.forms----------");
            console.log(document.forms);
            console.log("----------document.images----------");
            console.log(document.images);
            console.log("----------document.links----------");
            console.log(document.links);
            console.log("----------document.scripts----------");
            console.log(document.scripts);

            //querySelector() 选择器
            console.log("----------querySelector----------");
            console.log(document.querySelector("li")); //获取第一个li标签
            console.log(document.querySelector("#sh")); //获取id为bj的li标签

            //querySelectorAll() 选择器
            console.log("----------querySelectorAll----------");
            console.log(document.querySelectorAll("li")); //获取所有li标签
            console.log(document.querySelectorAll("#sh")); //获取id为sh的li标签

            //全选按钮
            var checkedAllButton = document.getElementById("checkedAllButton");
            checkedAllButton.onclick = () => {
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++){
                    items[i].checked = true;
                }
            }

            //全不选按钮
            var checkedNoButton = document.getElementById("checkedNoButton");
            checkedNoButton.onclick = () => {
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++){
                    items[i].checked = false;
                }
            }

            //反选按钮
            var checkedReverseButton = document.getElementById("checkedReverseButton");
            checkedReverseButton.onclick = () => {
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++){
                    items[i].checked = !items[i].checked;
                }
            }

            //全选/全不选按钮
            var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = () => {
                console.log(this);
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++){
                    items[i].checked = checkedAllBox.checked;
                }
            }

            //提交按钮
            var submit = document.getElementById("submit");
            submit.onclick = () => {
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            }
            var items = document.getElementsByName("items");
            items.forEach((item) => {
                item.onclick = () => {
                    checkedAllBox.checked = true;
                    for(var i = 0; i < items.length; i++){
                        if(!items[i].checked){
                            checkedAllBox.checked = false;
                            return;
                        }
                    }
                }
            })
            




                
        }


    
    </script>

</head>

<body>
    <button id="btn">button</button>
    <!-- // 生成一系列的dom元素，用作dom查询的测试 -->
    <!-- //查找bj节点，bj节点为列表下的地区“北京”的id -->
    <h1>地区列表数据</h1>
    <ul id="list">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <h1>电子设备列表数据</h1>
    <ul id="list2">
        <li>鼠标</li>
        <li>键盘</li>
        <li>鼠标垫</li>
        <li>鼠标垫</li>
    </ul>
    <h1>性别选择输入</h1>
    <input type="radio" name="sex" value="男" title="男">男</input>
    <input type="radio" name="sex" value="女" title="女">女</input>
    <p></p>
    <!-- <button id="btn2">提取bj数据并将背景标记为红色</button>
    <button id="btn3">搜索li标签数据并设置黄色背景</button>
    <button id="btn4">查找input标签数据</button> -->
    <button id="btn2">button2</button>
    <button id="btn3">button3</button>
    <button id="btn4">button4</button>

    <br />
    <form method="post" action="">
        <h2>表单数据</h2>
        <input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br />
        <input type="button" id="checkedAllButton" value="全选" \>
        <input type="button" id="checkedNoButton" value="全不选" \>
        <input type="button" id="checkedReverseButton" value="反选" \>
        <input type="button" id="submit" value="提交" \>

    </form>
    <br />


    <div id="out">
        <h1>图片</h1>
           <img id="img" src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" alt="" \>
           <button id="prev">prev</button>
           <button id="next">next</button>
    </div>

</body>

</html>